import { Button, List, Avatar, Card } from 'antd'
import React, { ReactNode } from 'react'
import { TabCollection } from '../pages/workspace/workspaceAPI'
import style from './DefaultTabInfo.module.css'

interface DefaultTabInfoProps {
  collection: TabCollection
  tabDraggable: boolean
  children?: ReactNode
}

const DefaultTabInfo = (props: DefaultTabInfoProps) => {
  const _getTimeStr = (timeStamp: number) => {
    const time = new Date(timeStamp)
    const hour = time.getHours()
    const minutes = time.getMinutes()
    return `${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()}
    ${hour}:${minutes >= 10 ? '' : '0'}${minutes}`
  }

  const handleDragStart = (e: any) => {
    const name = e.target.innerText
    const url = e.target.href
    e.dataTransfer.setData('text/plain', JSON.stringify({ name, url }))
  }

  const handleClickRecoveryBtn = () => {
    _sendMessageToChromeExtension({
      tabs: props.collection.tabItems,
    })
  }

  const _sendMessageToChromeExtension = (message: Object) => {
    // The ID of the extension we want to talk to.
    const extensionId = 'jacjcdnicdfgdgdfoohhfimgfpbhfpop'
    // Make a simple request:
    chrome.runtime.sendMessage(extensionId, message, function (response) {
      if (!response.success) {
        console.log('hasError')
      }
    })
  }

  return (
    <div className={style.container}>
      <Card
        title={
          <div className={style.cardhead}>
            {' '}
            <h2>{props.collection.tabItems.length}个标签页</h2>
            <span>创建于{_getTimeStr(props.collection.createTime)}</span>
          </div>
        }
        extra={
          <div className={style.topRight}>
            <div className={style.buttons}>
              <Button
                type="primary"
                ghost
                className={style.button}
                onClick={handleClickRecoveryBtn}
              >
                恢复全部
              </Button>
              {props.children}
            </div>
          </div>
        }
        style={{ width: 600 }}
      >
        <List
          itemLayout="horizontal"
          size="small"
          dataSource={props.collection.tabItems}
          renderItem={item => (
            <List.Item>
              {
                <a
                  href={item.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  key={item._id}
                  draggable={props.tabDraggable}
                  onDragStart={handleDragStart}
                >
                  {item.name}
                </a>
              }
            </List.Item>
          )}
        />
        {/* <div className={style.bottom}>
        {props.collection.tabItems.map(item => (
          <a
            href={item.url}
            key={item._id}
            draggable={props.tabDraggable}
            onDragStart={handleDragStart}
          >
            {item.name}
          </a>
        ))}
      </div> */}
      </Card>
    </div>
  )
}

export default DefaultTabInfo
